import React from 'react'
import { StackedAreaChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import { StyleSheet, View } from 'react-native'
import { stackedDatas, stackesKeys } from '../../genUtil';
class LayeredChartsExample extends React.PureComponent {

  render() {

    // const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]
    // const data2 = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80].reverse()
    const data = [...stackedDatas];
    const colors = ['rgba(138, 0, 230, 0.8)', 'rgba(173, 51, 255, 0.8)', 'rgba(194, 102, 255, 0.8)', 'rgba(214, 153, 255, 0.8)'];
    const keys = [...stackesKeys];
    return (
      <View style={{ height: 200 }}>
        {/* <AreaChart
          style={{ flex: 1 }}
          data={data}
          svg={{ fill: 'rgba(134, 65, 244, 0.5)' }}
          contentInset={{ top: 20, bottom: 20 }}
          curve={shape.curveNatural}
        >
          <Grid {...this.props}/>
        </AreaChart>
        <AreaChart
          style={StyleSheet.absoluteFill}
          data={data2}
          svg={{ fill: 'rgba(34, 128, 176, 0.5)' }}
          contentInset={{ top: 20, bottom: 20 }}
          curve={shape.curveNatural}
        /> */}
        <StackedAreaChart
          style={{ flex: 1 }}
          contentInset={{ top: 10, bottom: 10 }}
          data={data}
          keys={keys}
          colors={colors}
          curve={this.props.curve ? this.props.curve : shape.curveNatural}
          order={this.props.order ? this.props.order : null}
          offset={this.props.offset ? this.props.offset : null}
        >
          <Grid {...this.props}/>
        </StackedAreaChart>
      </View>
    )
  }

}

export default LayeredChartsExample